<template>
	<view class="grid icon-list" :class="['column-' + column, border ? '' : 'no-border']">
		<view class="icon-list-item" v-for="(item,index) in listData" :key="index" @tap="skipToChildTank(index)">
			<view :src="url" :style="[{color: item.iconColor}]" :class="['icon-item iconfont ' + item.iconSrc]" class="spe-size"></view>
			<text class="icon-text">{{item.title}}</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
		};
	},
	onLoad: function (option) {
        this.url = option.url
    },
	computed:{
		
	},
	props: {
		listData: {
			type: Array,
			default: () => {
				return [{
					title:"研究",
					id: 1,
					iconSrc:"icon-ICON-",
					// iconColor: "#33ff88"
				},
				{
					title:"专栏",
					id: 2,
					iconSrc:"icon-ICON-1",
					// iconColor: "#fbbd08"
				},{
					title:"数据",
					id: 3,
					iconSrc:"icon-ICON-2",
					// iconColor: "#33ff88"
				},
				{
					title:"榜单",
					id: 4,
					iconSrc:"icon-ICON-3",
					// iconColor: "#fbbd08"
				},{
					title:"直播",
					id: 5,
					iconSrc:"icon-ICON-4",
					// iconColor: "#33ff88"
				}];
			}
		},
		column: {
			type: Number,
			default: 5
		},
		border: {
			type: Boolean,
			default: true
		}
	},
	methods:{
		skipToChildTank(idx){
			const type = this.listData[idx].id
			const title = this.listData[idx].title
			if(type == 5){
				// window.location.href ="http://www.creb.com.cn/special/zkzb/index.html";
				plus.runtime.openURL('http://www.creb.com.cn/special/zkzb/index.html');
			}else{
				uni.navigateTo({
					url: '/pages/thinkTank/childThinkTank/childThinkTank?type=' + type + '&title=' + title
				})
			}
		}
	}
};
</script>

<style scoped>
.grid {
	display: flex;
	flex-wrap: wrap;
}
.grid .icon-list-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10upx 0 20upx 0;
	position: relative;
}
.grid.no-border {
	border: none;
}
.grid.column-4 > .icon-list-item {
	width: 25%;
}
.grid.column-3 > .icon-list-item {
	width: 33.33%;
}
.grid.column-5 > .icon-list-item {
	width: 20%;
}
.grid .icon-list-item .icon-item {
	font-size: 48upx;
}
.icon-text {
	color: #888888;
	font-size: 26upx;
}
.spe-size{
	font-size: 50upx;
}
.grid .icon-list-item:after {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	border-right: 1px solid rgba(0, 0, 0, 0.1);
	width: 200%;
	height: 200%;
	transform: scale(0.5);
	transform-origin: 0 0;
}
.grid.column-3 > .icon-list-itme:nth-child(3n):after,
.grid.column-4 > .icon-list-itme:nth-child(4n):after,
.grid.column-5 > .icon-list-itme:nth-child(5n):after {
	border-right-width: none;
}
/* .grid.column-3 > .icon-list-itme:nth-last-child(n+3):after,
.grid.column-4 > .icon-list-itme:nth-last-child(n+4):after,
.grid.column-5 > .icon-list-itme:nth-last-child(n+5):after {
	border-bottom-width: none;
} */
</style>
